<template>
  <div>
    <h2>日志视图模式选择案例</h2>
    <div class="all">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="mod1" name="mod1">
          <h4>模式：按钮点击弹出层选择模式</h4>
          <br />
          <el-button type="primary" @click="selectMod">{{ modStr }}</el-button>
          <el-dialog title="mod1" data-title="弹出框" :visible.sync="dialogTableVisible" width="36%">
            <div id="modSelectDiv">
              <div class="flex" style="display: flex">
                <div class="title">模式：</div>
                <div>
                  <div data-title="模式内容选择">
                    <el-select v-model="value" placeholder="请选择模式" size="mini">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <br />
              <div class="flex" style="display: flex" data-title="mod2内容">
                <div class="title">关键字：</div>
                <span>
                  <el-select :disabled="value == 1" v-model="mod2Str" placeholder="请选择关键字" size="mini">
                    <el-option v-for="item in logSelectModJson.mod2" :key="item.strType" :label="item.strType" :value="item.strType">
                    </el-option>
                  </el-select>
                </span>
              </div>
              <br />
              <div style="display: flex; margin-left: 40%">
                <el-button type="primary" size="mini" @click="save">保存</el-button>
                <el-button type="primary" size="mini" @click="dialogTableVisible = false">取消</el-button>
              </div>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="mod2" name="mod2">
          <h4>模式：按钮移入使用tippy层显示选择模式</h4>
          <br />

          <el-popover placement="top" width="400" trigger="click" v-model="popoverVal">
            <div>
              <div>
                <div class="flex" style="display: flex">
                  <div class="title">模式：</div>
                  <div>
                    <div data-title="模式内容选择">
                      <el-select v-model="value" placeholder="请选择模式" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <br />
                <div class="flex" style="display: flex" data-title="mod2内容">
                  <div class="title">关键字：</div>
                  <span>
                    <el-select :disabled="value == 1" v-model="mod2Str" placeholder="请选择关键字" size="mini">
                      <el-option v-for="item in logSelectModJson.mod2" :key="item.strType" :label="item.strType" :value="item.strType">
                      </el-option>
                    </el-select>
                  </span>
                </div>
                <br />
                <div style="display: flex; margin-left: 40%">
                  <el-button type="primary" size="mini" @click="save();popoverVal=false;">保存</el-button>
                  <el-button type="primary" size="mini" @click="dialogTableVisible = false;popoverVal=false;">取消</el-button>
                </div>
              </div>
            </div>
            <el-button type="primary" slot="reference">{{ modStr }}</el-button>
          </el-popover>

        </el-tab-pane>
        <el-tab-pane label="mod3" name="mod3">
          <div class="mod3Box" @mouseout.stop="opAction(false)">
            <h4>模式：按钮移入下方显示选择模式</h4>
            <br />
            <button type="primary" class="btnDiv el-button--primary el-button" @click="selectMod2" @mouseenter.prevent.stop="opAction(true)">{{ modStr }}</button>

            <!-- <div class="box" id="box" :class="{'opacity1':op==true}" @mouseenter.stop="opAction(true)"></div> -->
            <div class="btnDivBox" ref="btnDivBox" :class="{'opacity1':op==true}" @mouseenter.stop="opAction(true)">
              <div class="btnDivBoxLine"></div>
              <div>
                <div class="flex" style="display: flex">
                  <div class="title">模式：</div>
                  <div>
                    <div data-title="模式内容选择">
                      <select style="width:190px;height:28px;">
                        <option value="1">普通模式</option>
                        <option value="2">TSS模式</option>
                      </select>

                    </div>
                  </div>
                </div>
                <br />
                <div class="flex" style="display: flex" data-title="mod2内容">
                  <div class="title">关键字：</div>
                  <span>
                    <el-select :disabled="value == 1" v-model="mod2Str" placeholder="请选择关键字" size="mini">
                      <el-option v-for="item in logSelectModJson.mod2" :key="item.strType" :label="item.strType" :value="item.strType">
                      </el-option>
                    </el-select>
                  </span>
                </div>
                <br />
                <div style="display: flex; margin-left: 40%">
                  <el-button type="primary" size="mini" @click="save">保存</el-button>
                  <el-button type="primary" size="mini" @click="dialogTableVisible = false;popoverVal=false;">取消</el-button>
                </div>
              </div>
            </div>

          </div>

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "logSelectMod",
  data() {
    return {
      activeName: "mod1",
      dialogTableVisible: false,
      popoverVal: false,
      op: false,
      // modStr: "",
      mod: { 1: "普通模式", 2: "TSS模式" },
      mod2Str: "",
      logSelectModJson: {
        mod: 1,
        mod2: [
          { strType: "Info", selected: 1 },
          { strType: "Bug", selected: 0 },
          { strType: "Warning", selected: 0 },
        ],
      },
      options: [
        {
          value: 1,
          label: "普通模式",
        },
        {
          value: 2,
          label: "TSS模式",
        },
      ],
      value: "",
    };
  },
  computed: {
    modStr: function () {
      return this.mod[this.logSelectModJson.mod];
    },
  },
  mounted() {
    this.value = 1;
    this.logSelectModJson.mod2.map((item) => {
      if (item.selected) {
        this.mod2Str = item.strType;
      }
    });
  },
  methods: {
    selectMod() {
      console.log("selectMod");
      this.dialogTableVisible = true;
    },
    selectMod2() {
      console.log("selectMod2");
    },
    opAction(flag) {
      return false;
      console.log("opAction flag", flag);
      this.op = flag;
    },
    save() {
      this.logSelectModJson.mod = this.value;
      this.dialogTableVisible = false;
      let btnDivBox = this.$refs.btnDivBox;
      btnDivBox.style.display = "none";
      setTimeout(() => {
        let str = this.mod[this.logSelectModJson.mod];
        alert("保存模式为 ‘" + str + "’ ");
      }, 300);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style type="text/css" scoped >
.all {
  height: 100%;
  width: 100%;
  background-color: #e9e9e9;
}
.Li-theme {
  z-index: 10;
  background-color: #fff;
  color: #333;
}
.btnDiv:hover {
  background-color: #fff;
  color: #333;
  border-color: #999;
  /* border-bottom-color: red; */
  border-radius: 0;
  /* border-style: solid solid none solid; */
  z-index: 11;
}
.btnDiv:hover ~ .box {
  display: block !important;
}
.btnDiv:hover ~ .btnDivBox {
  display: block !important;
}
.btnDivBox:hover {
  display: block !important;
}

.box:hover ~ .btnDivBox {
  display: block !important;
}
.btnDivBox:hover ~ .btnDiv {
  background-color: #fff !important;
  color: #333 !important;
  border-color: #999 !important;
  border-radius: 0 !important;
  z-index: 11 !important;
}
.btnDivBoxLine {
  position: absolute;
  top: -1px;
  left: 0px;
  width: 97px;
  height: 2px;
  background-color: #fff;
}
.btnDivBox:hover + #box {
  display: block !important;
}
.box:hover {
  display: block !important;
}
.btnDivHover {
  background-color: #fff !important;
  color: #333 !important;
  border-color: #999 !important;
  border-radius: 0 !important;
  z-index: 11 !important;
}
.opacity1 {
  opacity: 1 !important;
  display: block !important;
}
.mod3Box {
  /* width: 100%;
  height: 400px; */
  position: relative;
  margin: 0 39px;
}
.btnDivBox {
  background-color: #fff !important;
  width: 350px;
  padding: 20px;
  position: relative;
  top: -1px;
  border: 1px solid #999;
  display: none;
}
.title {
  min-width: 110px;
  text-align: end;
  line-height: 40px;
  margin-right: 40px;
}
.box {
  width: 97px;
  height: 4px;
  background-color: #fff;
  position: relative;
  top: -1px;
  left: 1px;
  z-index: 1;
  display: none;
}
.el-tabs__content {
  height: calc(100%);
}
</style>